<template>
  <page-form-row class="remove-error">
    <page-form-item
      :field="`${configTypePropStr}.isNightServiceFee`"
      label="是否收取夜间服务费"
      :style="{ marginBottom: form[configTypePropStr].isNightServiceFee ? '3px' : '8px' }"
    >
      <template #label="{ label }">
        <span class="font-bold">{{ label }}</span>
      </template>
      <a-radio-group v-model="form[configTypePropStr].isNightServiceFee" @change="isNightServiceFeeChangeFn">
        <a-radio v-for="item in dict.nightServiceFeeMap" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
      </a-radio-group>
    </page-form-item>
    <page-form-item v-if="form[configTypePropStr].isNightServiceFee == 1" size="1">
      <div class="page-form-block">
        <div class="night-service-item" v-for="(item, index) in form[configTypePropStr].nightServiceFeeList" :key="index">
          <page-form-row>
            <page-form-item class="night-service-item-time-range" :label="index == 0 ? '时间选择' : ''" required>
              <page-form-item
                class="my-0 night-service-item-time-item"
                :field="`${configTypePropStr}.nightServiceFeeList.${index}.startTime`"
                :rules="index == 0 ? { message: '请选择开始时间', required: true } : {}"
              >
                <a-time-picker
                  disable-confirm
                  v-model="item.startTime"
                  format="HH:mm"
                  placeholder="开始时间"
                  :disabled="index > 0"
                  class="night-servie-item-timepicker"
                  :disabledMinutes="(selectedHour) => disableMinuteFn(selectedHour, index, 'start')"
                />
              </page-form-item>
              <div class="night-service-item-spilter">-</div>
              <page-form-item
                class="my-0 night-service-item-time-item"
                :field="`${configTypePropStr}.nightServiceFeeList.${index}.endTime`"
                :rules="{ message: '请选择截止时间', required: true }"
              >
                <a-time-picker
                  disable-confirm
                  @change="nightServiceFeeListTimeChangeFn(index)"
                  v-model="item.endTime"
                  format="HH:mm"
                  placeholder="截止时间"
                  class="night-servie-item-timepicker"
                  :disabledMinutes="(selectedHour) => disableMinuteFn(selectedHour, index, 'end')"
                />
              </page-form-item>
            </page-form-item>
            <page-form-item
              :label="index == 0 ? '收费规则' : ''"
              required
              style="position: relative"
              :field="`${configTypePropStr}.nightServiceFeeList.${index}.amount`"
              :rules="{ message: '请输入金额', required: true }"
            >
              <i-input-number v-model="item.amount" unit="元/次" />
              <operate-list
                :style="{ top: index > 0 ? '0' : '28px' }"
                :index="index"
                :length="form[configTypePropStr].nightServiceFeeList.length"
                @add="newRuleFn"
                @delete="delRuleFn(index)"
              />
            </page-form-item>
          </page-form-row>
        </div>
      </div>
    </page-form-item>
  </page-form-row>
</template>

<script setup name="MerchantStoreServiceConfigNightService">
  import { inject } from 'vue'
  import operateList from './operte-list.vue'
  // 接收父组件
  const form = inject('form')
  const dict = inject('dict')
  const props = defineProps({
    configTypePropStr: String,
  })
  const isNightServiceFeeChangeFn = (value) => {
    if (value == 1) {
      let rules = form.value[props.configTypePropStr].nightServiceFeeList
      if (!rules || rules.length == 0) {
        // 默认值
        form.value[props.configTypePropStr].nightServiceFeeList = [
          {
            startTime: '',
            endTime: '',
            amount: '',
          },
        ]
      }
    }
  }
  // 前后时间相等
  // 如果小时一样，则限制分钟不能相等
  // 小时不一样，不加限制
  const disableMinuteFn = (selectedHour, index, type) => {
    const rules = form.value[props.configTypePropStr].nightServiceFeeList
    let limitTime = null
    if (index == 0) {
      const item = rules[index]
      if (type == 'start') {
        limitTime = item.endTime
      } else {
        limitTime = item.startTime
      }
    } else {
      const prevItem = rules[index - 1]
      if (prevItem) {
        limitTime = prevItem.endTime
      }
    }
    if (limitTime && limitTime != '') {
      const [hourStr, minStr] = limitTime.split(':')
      if (selectedHour == hourStr) {
        return [Number(minStr)]
      }
    }
  }
  // 添加夜间收费规则
  const newRuleFn = () => {
    const rules = form.value[props.configTypePropStr].nightServiceFeeList
    const last = rules[rules.length - 1]
    const newRule = {
      startTime: '',
      endTime: '',
      amount: '',
    }
    if (last.endTime) {
      newRule.startTime = last.endTime
    }
    form.value[props.configTypePropStr].nightServiceFeeList.push(newRule)
  }
  // 删除夜间收费规则
  const delRuleFn = (index) => {
    const rules = form.value[props.configTypePropStr].nightServiceFeeList
    rules.splice(index, 1)
  }
  // 夜间服务费 时间变化逻辑
  const nightServiceFeeListTimeChangeFn = (index) => {
    const rules = form.value[props.configTypePropStr].nightServiceFeeList
    const item = rules[index]
    const next = rules[index + 1]
    if (next) {
      next.startTime = item.endTime
    }
  }
</script>

<style lang="less" scoped>
  .remove-error {
    :deep(.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled)) {
      background-color: var(--color-fill-2) !important;
      border-color: transparent !important;
    }
    :deep(.arco-form-item-status-error .arco-textarea-wrapper:not(.arco-textarea-disabled)) {
      background-color: var(--color-fill-2) !important;
      border-color: transparent !important;
    }
    :deep(.arco-form-item-status-error .arco-picker:not(.arco-picker-disabled)) {
      background-color: var(--color-fill-2) !important;
      border-color: transparent !important;
    }
    :deep(
        .arco-form-item-status-error .arco-input-wrapper:focus-within,
        .arco-form-item-status-error .arco-input-wrapper.arco-input-focus
      ) {
      background-color: var(--color-bg-2) !important;
      border-color: rgb(var(--primary-6)) !important;
      box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
    }
    :deep(.arco-form-item-status-error .arco-picker:not(.arco-picker-disabled).arco-picker-focused) {
      background-color: var(--color-bg-2) !important;
      border-color: rgb(var(--primary-6)) !important;
      box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
    }
  }

  .page-form-block {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px 20px 0 20px;
    width: 100%;
  }

  :deep(.arco-picker-clear-icon) {
    font-size: 14px;
  }
  :deep {
    .arco-form-item-content,
    .arco-form-item-wrapper-col {
      min-height: 32px;
    }
  }
  .night-service-item-time-range {
    :deep(.arco-form-item-content-flex) {
      align-items: flex-start;
    }
    .night-service-item-time-item {
      :deep(.arco-form-item-content-flex) {
        align-items: center;
      }
    }
  }
  .night-service-item-spilter {
    line-height: 36px;
    height: 36px;
    margin: 0 14px;
  }
</style>
